<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <el-tab-pane label="员工管理">
            <!-- 新增角色按钮 -->
            <div class="btn-hu">
              <el-button type="primary" @click="addFn">添加员工</el-button>
            </div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              class="table"
            >
              <el-table-column prop="username" label="用户名" />
              <el-table-column prop="email" label="邮箱" />
              <el-table-column label="操作">
                <!-- 利用作用域插槽，实现自定义内容 -->
                <template v-slot="{ row }">
                  <el-button type="primary" @click="setRole(row.id)">设置角色</el-button>
                  <el-button @click="editFn(row.id)">编辑</el-button>
                  <el-button
                    type="danger"
                    @click="delFn(row.id)"
                  >删除</el-button>
                </template>
              </el-table-column>

              <!-- 分页器 -->
              <!-- <el-row type="flex" justify="center">
                <el-pagination
                  layout="prev, pager, next"
                  :total="total"
                  :page-size="pagesize"
                  @current-change="currentchangeFn"
                />
              </el-row> -->
            </el-table>
            <!-- 分页器 -->
            <el-row type="flex" justify="center">
              <el-pagination
                layout="prev, pager, next"
                :total="total"
                :page-size="pagesize"
                @current-change="currentchangeFn"
              />
            </el-row></el-tab-pane>
        </el-tabs>
      </el-card>

      <!-- 弹窗组件 -->
      <el-dialog
        :title="formData.id ? '编辑员工' : '新增员工'"
        :visible="showDialog"
        width="70%"
        @close="closeFn"
      >
        <!-- .trim去除首尾空格 -->
        <el-form
          ref="form"
          :rules="rules"
          :model="formData"
          label-width="120px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model.trim="formData.username" placeholder="1-10个字符" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model.trim="formData.email"
              placeholder="请输入邮箱"
            />
          </el-form-item>
          <el-form-item v-if="!formData.id" label="密码" prop="password">
            <el-input v-model.trim="formData.password" placeholder="1-10个字符" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeFn">取 消</el-button>
          <el-button type="primary" @click="sureFn">确 定</el-button>
        </span>
      </el-dialog>
      <AssignRole ref="setRole" :show-dialog.sync="visibleDialog" />
    </div>
  </div>
</template>
<script>
import { getEmployeeList, addEmployee, editEmployee, delEmployee, getEmployeeTotal } from '@/api/employees'
import AssignRole from './components/assign-role.vue'
export default {
  components: { AssignRole },

  data() {
    return {
      visibleDialog: false,
      tableData: [],
      formData: {
        username: '',
        email: '',
        password: ''
      },

      showDialog: false,
      total: 0, // 总数量
      page: 0, // 当前页码
      pagesize: 5, // 每页条数
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }

        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    // 设置角色点击按钮
    setRole(id) {
      this.visibleDialog = true
      console.log(132, this.$refs.setRole)
      this.$refs.setRole.getEmployeeById(id)
    },

    // 获取列表
    async getEmployeeList() {
      const result = await getEmployeeTotal()
      this.total = result.data
      const res = await getEmployeeList({
        _limit: this.pagesize,
        _start: this.page
      })

      this.tableData = res.data
    },
    // 添加员工
    addFn() {
      this.showDialog = true
    },
    // 确定按钮
    async sureFn() {
      // 表单验证
      await this.$refs.form.validate()
      if (this.formData.id) {
        // 编辑
        await editEmployee(this.formData)
      } else {
        // 调用新增接口
        await addEmployee(this.formData)
      }

      // 更新数据
      this.getEmployeeList()
      // 关闭弹窗
      this.closeFn()
    },
    closeFn() {
      // 清空数据
      this.formData = {
        username: '',
        email: '',
        password: ''
      }
      // 清空校验规则
      this.$refs.form.resetFields
      this.showDialog = false
    },
    async editFn(id) {
      // 打开弹窗
      this.showDialog = true
      // 数据回显
      const res = await editEmployee(id)
      this.formData = res.data
    },
    // 删除
    delFn(id) {
      this.$confirm('是否确定删除', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 获取据id
        await delEmployee(id)
        // 更新数据
        this.getEmployeeList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页器换页
    currentchangeFn(curPage) {
      // curPage:就是用户点击的页码的值
      this.page = (curPage - 1) * this.pagesize
      // 调用接口 获取最新页码的值
      this.getEmployeeList()
    }

  }
}
</script>

<style lang="scss" scoped>
.table {
  margin-top: 10px;
}
.btn-hu{
  display: flex;
  align-items: center;
  justify-content: end;
}
</style>
